<template>
	<div class="question-page">
		<!-- 搜索区域 -->
		<div class="pad-20">
			<el-tabs
				v-model="listType"
				class="question-tabs"
				@tab-click="onChangeListType"
			>
				<el-tab-pane label="全部试题" name="all" />
				<el-tab-pane label="待审核" name="audit" />
				<el-tab-pane label="未通过" name="fail" />
			</el-tabs>
		</div>
		<ve-trans-div>
			<div class="height-10" />
		</ve-trans-div>
		<!-- 搜索 -->
		<div class="question-search">
			<search-filter
				ref="searchFilter"
				:list-type="listType"
				:search-loading="isShowTableLoading"
				@submit="onSubmit"
				@reset="onReset"
			/>
		</div>
		<ve-trans-div>
			<div class="height-10" />
		</ve-trans-div>
		<div class="table-list">
			<!-- 操作按钮 -->
			<div class="question-button flex jc-between " v-permiss-code="'rc/questions/list-list'">
				<div class="left">
					<el-button
						:class="[{'theme_font_color theme-border-color': selectIds.length}]"
						@click="auditQuestion()"
						:loading="isShowBatchLoading"
						v-permiss-code="'rc/questions/list-audit'"
					>
						批量审核
					</el-button>
					<el-button
						:class="[{'theme_font_color theme-border-color': selectIds.length}]"
						@click="shelveQuestion('shelve-y')"
						:loading="isShowBatchLoading"
						v-permiss-code="'rc/questions/list-disable'"
					>
						批量启用
					</el-button>
					<el-button
						:class="[{'theme_font_color theme-border-color': selectIds.length}]"
						@click="shelveQuestion('shelve-n')"
						:loading="isShowBatchLoading"
						v-permiss-code="'rc/questions/list-disable'"
					>
						批量禁用
					</el-button>
					<el-button
						:class="[{'theme_font_color theme-border-color': selectIds.length}]"
						@click="deleteQuestion()"
						:loading="isShowBatchLoading"
						v-permiss-code="'rc/questions/list-delete'"
					>
						批量删除
					</el-button>
					<el-button
						:class="[{'theme_font_color theme-border-color': isCanUpdate}]"
						@click="onBatchUpdate"
						v-permiss-code="'rc/questions/list-edit-batch'"
					>
						批量修改
					</el-button>
					<el-button @click="onShowPropDialog">自定义列表</el-button>
					<el-button type="primary" @click="onGoToAddPage" v-permiss-code="'rc/questions/list-add'">
						<i class="el-icon-plus" />添加试题
					</el-button>
				</div>

				<div class="right flex jc-between ai-center ">
					<div class="desc flex">
						<span>排序：</span>
						<div
							v-for="prop in sortPropArr"
							:key="prop.key"
							:class="{'active':orderKey===prop.key}"
							@click="onChangeSort(prop.key)"
						>
							{{ prop.text }}
							<img
								v-if="orderKey!==prop.key"
								class="title-icon"
								src="@rc/assets/images/icon-sort.png"
							>
							<img
								v-else
								class="title-icon"
								src="@rc/assets/images/icon-sort-active.png"
							>
						</div>
					</div>
					<div>
						<el-checkbox v-model="isShowAnswer">显示答案和解析</el-checkbox>
					</div>

					<div>
						<el-input
							placeholder="请输入内容"
							v-model.trim="content"
							@keyup.enter.native="onSubmit"
						>
							<el-select v-model="contentKey" slot="prepend" placeholder="请选择">
								<el-option label="题干内容" value="questionTitle" />
								<el-option label="资源ID" value="resourceId" />
							</el-select>
							<i
								slot="suffix"
								@click="onSubmit"
								class="el-icon-search"
							/>
						</el-input>
					</div>
				</div>
			</div>
			<!-- 列表 -->
			<div class="question-table" v-loading="isShowTableLoading">
				<el-table
					ref="tableRef"
					row-key="resourceId"
					:height="tableHeight"
					v-fix-table-height="{
						offset:48, // 预留底部高度, 分页器位置
						setHeight:(height)=>{
							tableHeight=height;
						}
					}"
					:data="showQuestionList"
					:row-style="tableRowStyle"
					:cell-style="tableCellStyle"
					:max-height="tableHeight"
				>
					<el-table-column
						align="center"
						width="45"
					>
						<!--下面是表头的复选框，使用插槽header。实现全选以及部分选择-->
						<template #header>
							<el-checkbox
								v-model="isAllCheck"
								:disabled="!showQuestionList.length"
								@change="handleCheckAllChange"
							/>
						</template>
						<template slot-scope="{row}">
							<el-checkbox
								:key="row.resourceId"
								v-if="!row.parentResourceId"
								v-model="row.isChecked"
								@change="rowSelectionChange(row)"
							/>
						</template>
					</el-table-column>
					<el-table-column
						class="theme-border-color"
						width="55"
						label="序号"
						prop="qIndex"
						v-slot="{ row }"
						align="center"
					>
						{{ row.parentResourceId?'':(page.pageIndex - 1) * page.pageSize + row.qIndex }}
					</el-table-column>
					<el-table-column
						class="theme-border-color"
						prop="resourceId"
						label="资源ID"
						width="180"
						v-slot="{ row }"
						align="center"
					>
						<div>
							<div>{{ row.parentResourceId?'':row.resourceId }}</div>
						</div>
					</el-table-column>
					<el-table-column
						prop="corpName"
						label="试题内容"
						min-width="600"
						v-slot="{ row }"
					>
						<question-show
							:data="row"
							:is-expand-analysis="row.isAnalysis"
						>
							<template #seq>
								<img
									v-if="!['A','CF','L','C'].includes(row.questionType)"
									src="@rc/assets/images/open-q-ico.png"
									alt="展开按钮"
									class="icon-open shrink-0"
									:class="{open: row.isAnalysis}"
									@click="row.isAnalysis = !row.isAnalysis"
								>
								<strong class="shrink-0" v-if="row.parentResourceId">{{ row.qIndex }}</strong>
							</template>
						</question-show>
					</el-table-column>
					<template
						v-for="prop in checkedPropList"
					>
						<el-table-column
							v-if="!hiddenProp(prop)"
							:key="prop.id"
							:label="prop.fieldDescription"
							width="150"
							v-slot="{row}"
							align="center"
						>
							{{ getPropValue(row,prop) }}
						</el-table-column>
					</template>

					<el-table-column
						fixed="right"
						prop="operateTime"
						label="操作"
						width="250px"
						v-slot="{ row }"
						align="center"
						v-permiss-code="{type: 'or',arr: ['rc/questions/list-edit','rc/questions/list-detail','rc/questions/list-audit','rc/questions/list-disable','rc/questions/list-delete']}"
					>
						<el-button
							type="text"
							class="button-text"
							@click="onGoToEditPage(row)"
							v-permiss-code="'rc/questions/list-edit'"
						>
							编辑
						</el-button>
						<el-button
							type="text"
							class="button-text"
							@click="openMsg(row.resourceId,'info')"
							v-permiss-code="'rc/questions/list-detail'"
						>
							详细信息
						</el-button>
						<el-button
							type="text"
							class="button-text"
							@click="openMsg(row.resourceId,'record')"
							v-permiss-code="'rc/questions/list-log'"
						>
							操作记录
						</el-button>
						<el-dropdown class="margin-l10" v-permiss-code="{type: 'or',arr: ['rc/questions/list-audit','rc/questions/list-disable','rc/questions/list-delete' ]}">
							<span class="el-dropdown-link">
								<el-button
									type="text"
									class="button-text"
								>
									更多
								</el-button>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item
									v-if="row.auditStatus === 'P' && !row.parentResourceId"
									@click.native="auditQuestion(row.resourceId)"
									v-permiss-code="'rc/questions/list-audit'"
								>
									审核
								</el-dropdown-item>
								<el-dropdown-item
									v-if="row.isAvailable === 'Y'"
									@click.native="shelveQuestion('shelve-n', row, Boolean(row.parentType))"
									v-permiss-code="'rc/questions/list-disable'"
								>
									禁用
								</el-dropdown-item>
								<el-dropdown-item
									v-if="row.isAvailable === 'N'"
									@click.native="shelveQuestion('shelve-y', row, Boolean(row.parentType))"
									v-permiss-code="'rc/questions/list-disable'"
								>
									启用
								</el-dropdown-item>
								<el-dropdown-item
									@click.native="deleteQuestion(row.resourceId, Boolean(row.parentType))"
									v-permiss-code="'rc/questions/list-delete'"
								>
									删除
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</el-table-column>
				</el-table>
				<!-- 分页器 -->
				<ve-pagination
					:page-size-options="[5, 10, 20, 30, 50]"
					:get-page="onSearch"
					:page.sync="page"
				/>
			</div>
		</div>

		<!-- 弹窗区域 -->
		<!-- 自定义列表 -->
		<prop-dialog
			v-if="propDialogMsg.show"
			:show.sync="propDialogMsg.show"
			:checked-list="checkedPropList"
			:prop-list="propList"
			:list-type="listType"
			@success="onSuccessPropDialog"
			@cancel="onCancelPropDialog"
		/>
		<!-- 详细信息弹窗 -->
		<msgs-dialog ref="msgsDialog" :list-type="listType" />
		<!-- 批量修改弹窗 -->
		<update-dialog
			v-if="updateDialogMsg.show"
			:show.sync="updateDialogMsg.show"
			:ids="selectIds"
			:project-id="updateDialogMsg.projectId"
			:subject-id="updateDialogMsg.subjectId"
			@success="onSuccessUpdateDialog"
			@cancel="onCancelUpdateDialog"
		/>
		<repeat-process-single-dialog
			:show.sync="isShowProcessDialog"
			:question="processQuestion"
			:repeat-resource-id="processRepeatResourceId"
			:question-resource-id="processQuestionResourceId"
			:is-show-tool="false"
			:op-origin="opOrigin"
			:op-text="opText"
			:will-show="willShow"
			:will-hide="willHide"
		/>
	</div>
</template>

<script src="./index.mjs"/>
<style lang="less" scoped src="./index.less"/>
<style lang="less">
    //解决视频加载页面抖动问题
    body{
        width: 100vw;
        overflow: hidden;
    }
</style>
